<template>
  <div
    ref="erpPageTable"
    class="erp-page-table"
  >
    <erp-page-table-header
      v-show="showHeader"
      :height="height"
      :max-height="height"
      :screen-list="screenList"
      :is-tree="isTree"
      :total="total"
      :list-permission="listPermission"
      :loading="loading"
      :show-query="showQuery"
      :show-export="showExport"
      :fields="customFields"
      :init-data="initData"
      :keyword-key="keywordKey"
      :show-keyword-search="showKeywordSearch"
      :advanced-search="advancedSearch"
      :head-search-placeholder="headSearchPlaceholder"
      :data-source-api="dataSourceApi"
      :tree-search-key="treeSearchKey"
      :tree-table="treeTable"
      @search="handleSearch"
      @export="handleExport"
      @head-search="handleHeadSearch"
      @head-reset="handleHeadReset"
      @search-keyword="handleSearchKeyword"
      @search-tree-table-keyword="handleSearchTreeTableKeyword"
      @create="handleCreate"
      @batch-delete="handleBatchDelete"
      @toggle-advanced-box="handleToggleAdvancedBox"
      @get-tree-search-data="getTreeSearchData"
    >
      <template #search-advanced>
        <slot name="search-advanced" />
      </template>
      <slot
        slot="handle-action"
        name="handle-action"
      />
    </erp-page-table-header>
    <!--        <vxe-table-->
    <!--                v-loading="loading"-->
    <!--                :border="border"-->
    <!--                v-bind="$attrs"-->
    <!--                v-on="$listeners"-->
    <!--                :highlight-current-row="highlightCurrentRow"-->
    <!--                ref="table"-->
    <!--                size="mini"-->
    <!--                :stripe="!isTree ? stripe : false"-->
    <!--                :height="height"-->
    <!--                :data="data"-->
    <!--                :tree-config="treeProps"-->
    <!--                show-overflow-->
    <!--                highlight-hover-row-->
    <!--                :row-id="rowKey"-->
    <!--                :default-expand-all="defaultExpandAll"-->
    <!--                :show-summary="showSummary"-->
    <!--                :header-cell-style="headerCellStyle"-->
    <!--                :row-style="rowStyle"-->
    <!--                highlight-current-column-->
    <!--                @row-click="handleRowClick"-->
    <!--                @sort-change="handleSortChange"-->
    <!--                @selection-change="handleSelectionChange"-->
    <!--                @select="handleSelectChange"-->
    <!--                @select-all="handleSelectAllChange"-->
    <!--        >-->
    <!--            <vxe-table-->
    <!--                    v-bind="tableProps"-->
    <!--                    v-loading="loading"-->
    <!--                    element-loading-text="正在加载中..."-->
    <!--                    element-loading-spinner="el-icon-loading"-->
    <!--                    element-loading-background="rgba(0, 0, 0, 0.5)"-->
    <!--                    show-overflow-->
    <!--                    show-header-overflow-->
    <!--                    show-footer-overflow-->
    <!--                    highlight-hover-row-->
    <!--                    highlight-current-row-->
    <!--                    :height="height"-->
    <!--                    :header-row-style="headerRowStyle"-->
    <!--                    :header-cell-style="headerCellStyle"-->
    <!--                    :row-style="rowStyle"-->
    <!--                    :cell-style="cellStyle"-->
    <!--                    :sort-config="sortConfig"-->
    <!--                    :resizable="tableProps.resizable !== undefined ? tableProps.resizable : true"-->
    <!--                    :data="data"-->
    <!--                    :stripe="tableStripe"-->
    <!--                    :tree-config="treeConfig"-->
    <!--                    :checkbox-config="checkboxConfig"-->
    <!--                    :row-id="rowKey"-->
    <!--                    row-key-->
    <!--                    ref="table"-->
    <!--                    :empty-render="{name: !listPermission ? 'NotPermission' : 'NotData'}"-->
    <!--                    @sort-change="handleSortChange"-->
    <!--                    @current-change="handleTableCurrentChange"-->
    <!--                    @checkbox-change="handleCheckboxChange"-->
    <!--                    @checkbox-range-change="handleCheckboxRangeChange"-->
    <!--                    @checkbox-all="handleSelectAllChange"-->
    <!--            >-->
    <erp-table
      ref="table"
      v-loading="loading || (data === null && listPermission)"
      v-bind="tableProps"
      :element-loading-text="$store.state.loading.text"
      :element-loading-spinner="$store.state.loading.spinner"
      :element-loading-background="$store.state.loading.background"
      :is-tree="isTree"
      :row-id="rowKey"
      :height="height"
      :data="data"
      :item-selectable="itemSelectable"
      :list-permission="listPermission"
      @sort-change="handleSortChange"
      @current-change="handleTableCurrentChange"
      @checkbox-change="handleCheckboxChange"
      @checkbox-range-change="handleCheckboxRangeChange"
      @checkbox-all="handleSelectAllChange"
      @cell-click="handleSingleSelect"
      @close-loading="handleCloseLoading"
    >
      <!--                <template #empty v-if="!listPermission">-->
      <!--                    <i class="iconfont icon-zanwuquanxian empty-block-icon"></i>-->
      <!--                    <div class="empty-block-text">{{$t('common.noAccess')}}</div>-->
      <!--                </template>-->
      <!--                <template #empty v-else>-->
      <!--                    <i class="iconfont icon-zanwushuju empty-block-icon"></i>-->
      <!--                    <div class="empty-block-text">{{$t('common.emptyData')}}</div>-->
      <!--                </template>-->
      <!--                <template slot-scope="scope">-->
      <vxe-table-column
        v-if="checkTable"
        fixed="left"
        type="checkbox"
        width="55"
        align="center"
      />
      <vxe-table-column
        v-if="showOrderNumber"
        :title="$t('common.orderNumber')"
        fixed="left"
        type="seq"
        :width="orderNumberWidth"
        align="left"
        show-overflow="tooltip"
      />
      <template v-for="(item, index) in computedCustomFields">
        <vxe-table-column
          v-if="item.type === 'operation'"
          :key="index"
          header-align="center"
          align="center"
          :field="item.prop"
          :title-help="item.titleHelp"
          :width="item.type === 'operation' ? operationWidth : null"
          :fixed="item.type === 'operation' ? operationFixed : null"
        >
          <template slot="header">
            <span>{{ $t('common.operation') }}</span> <i
              v-if="customColumn"
              class="iconfont icon-peizhi config-icon"
              @click.stop="handleConfigColumn"
            />
          </template>
          <template slot-scope="scope">
            <slot
              name="operation"
              :row="scope.row"
            />
          </template>
        </vxe-table-column>
        <erp-page-table-column
          v-else
          :key="index"
          :item="item"
          :title-help="item.titleHelp"
          :tree-node="item.treeNode"
          :width="item.type === 'operation' ? operationWidth : null"
          :fixed="item.type === 'operation' ? operationFixed : null"
        >
          <template
            :slot="item.prop + '__column_slot'"
            slot-scope="{row}"
          >
            <slot
              :name="item.prop + '__column_slot'"
              :row="row"
            />
          </template>
        </erp-page-table-column>
      </template>
    </erp-table>
    <div v-if="listPermission">
      <el-pagination
        v-if="pagination"
        class="erp-page-pagination"
        background
        :small="true"
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next,total,sizes, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <column-config
      v-if="columns && columns.length > 0"
      ref="columnConfig"
      :fields="columns"
      :type="type"
      :operation-fixed="operationFixed"
      @change="handleChangeConfig"
    />
  </div>
</template>

<script>
import Vue from 'vue';

import {Pagination,  Select, Option, OptionGroup} from "element-ui";
import {getStorage, parseTime} from "@/utils";
import {VXETable} from 'vxe-table';
import ErpTable from './ErpTable';
Vue.use(Pagination);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);

const ColumnConfig = () => import('./ColumnConfig');
const ErpPageTableColumn = () => import('./ErpPageTableColumn');
const ErpPageTableHeader = () => import('./ErpPageTableHeader');

/**
 * 带搜索的表格列表
 * @author maolin
 */
export default {
  name: "ErpPageTable",
  components: {
    ColumnConfig,
    ErpPageTableColumn,
    ErpPageTableHeader,
    ErpTable
  },
  beforeRouteLeave (to, from, next) {
    if (this.timer) {
      clearInterval(this.timer);
    }
    next();
  },
  props: {
    // 树表格配置，通常树表格服务端不提供搜索，需要客户端自己配置搜索
    treeTable: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 渲染配置【已废弃】
     * @private
     */
    render: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 操作栏浮动
     * @public
     */
    opFixed: {
      type: String,
      default: null
    },
    /**
     * 表格属性
     * @public
     */
    tableProps: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 是否为树
     * @public
     */
    isTree: {
      type: Boolean,
      default: false
    },
    /**
     * 类型 [普通列表：list/ 单选：singleSelect/ 多选： multipleSelect]
     * @public
     */
    type: {
      type: String,
      default: 'list'
    },
    /**
     * 显示页面头
     * @public
     */
    showHeader: {
      type: Boolean,
      default: true
    },
    /**
     * 加载状态
     * @public
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 表格高度
     * @public
     */
    height: {
      default () {
        return 'auto';
      }
    },
    /**
     * 是否开启分页
     * @public
     */
    pagination: {
      type: Boolean,
      default () {
        return true;
      }
    },
    /**
     * 表格是否可以选择
     * @public
     */
    checkTable: {
      type: Boolean,
      default: true,
    },
    /**
     * 表格明暗条纹
     * @public
     */
    stripe: {
      type: Boolean,
      default: true
    },
    /**
     * 是否展示表格合计
     * @public
     */
    showSummary: {
      type: Boolean,
      default: false
    },
    /**
     * 表格数据
     * @public
     */
    data: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 表格是否开启边框
     * @public
     */
    border: {
      type: Boolean,
      default: true
    },
    /**
     * 表格行的key
     * @public
     */
    rowKey: {
      type: String,
      default: ''
    },
    /**
     * 分页页码
     * @public
     */
    pageIndex: {
      type: Number,
      default: 1,
    },
    /**
     * 分页每页数量
     * @public
     */
    pageSize: {
      type: Number,
      default: 30,
    },
    /**
     * 总数量
     * @public
     */
    total: {
      type: Number,
      default: 0
    },
    /**
     * 高亮当前行
     * @public
     */
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    /**
     * 可供配置的字段列表
     * @public
     */
    fields: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 可供筛选的列表
     * @public
     */
    screenList: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 页面加载是否初始化数据，若是会调用传递的初始化函数
     * @public
     */
    initData: {
      type: Boolean,
      default: true
    },
    /**
     * 表格树属性配置
     * @public
     */
    treeProps: {
      type: Object,
      default () {
        return {};
      }
    },
    /**
     * 是否默认展开所有
     * @public
     */
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    /**
     * 是否展示导出
     * @public
     */
    showExport: {
      type: Boolean,
      default: false
    },
    /**
     * 是否展示查询
     * @public
     */
    showQuery: {
      type: Boolean,
      default: false
    },
    /**
     * 某一行是否可以选
     * @public
     */
    itemSelectable: {
      type: Function
    },
    /**
     * 操作列宽度
     * @public
     */
    operationWidth: {
      type: [Number, String],
      default: 100
    },

    /**
     * 是否显示关键字查询（简单查询）
     * @public
     */
    showKeywordSearch: {
      type: Boolean,
      default: false
    },
    /**
     * 高级查询表单
     * @public
     */
    advancedSearch: {
      type: Array,
      default () {return [];}
    },
    /**
     * 是否可以自定义字段
     * @public
     */
    customColumn: {
      type: Boolean,
      default: true
    },
    /**
     * 头部按钮
     * @public
     */
    headButtons: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 行内按钮
     * @public
     */
    rowButtons: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 是否显示序号
     * @public
     */
    showOrderNumber: {
      type: Boolean,
      default: true,
    },
    /**
     * 关键字查询长提示
     * @public
     */
    headSearchPlaceholder: {
      type: String,
      default: ''
    },
    /**
     * 是否显示操作栏
     * @public
     */
    showOperation: {
      type: Boolean,
      default: true,
    },
    /**
     * 多选id
     * @public
     */
    multipleSelectedIds: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 关键字查询名称
     * @public
     */
    keywordKey: {
      type: String,
    },
    /**
     * 查看表格权限集合
     * @public
     */
    permissions: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
     * 数据源api一般用于高级查询的表单数据源
     * @public
     */
    dataSourceApi: {
    },
    /**
     * 列表使用左侧树搜索时需要的key
     * @public
     */
    treeSearchKey: {
      type: String
    },
    /**
     * 复选框列的宽度
     * @public
     */
    checkboxWidth: {
      type: Number,
      default: 55
    },
    /**
     * 序号列的宽度
     * @public
     */
    orderNumberWidth: {
      type: Number,
      default: 60
    }
  },
  data () {
    return {
      operationFixed: 'right',
      // operationWidth: '100',
      customFields: [],
      selectData: [],
      selectRow: [],
    };
  },
  computed: {
    columnConfigData () {
      let data = getStorage(this.name);
      if(!data) {
        data = this.fields;
        data = data.concat([
          {label: this.$t('common.operation'), prop: '__operation', type: 'operation', fixed: 'right', width: this.operationWidth, disabled: true, checked: true}
        ]);
      } else {
        data = JSON.parse(data);
      }
      return data;
    },

    columns() {
      let columns = this.fields;
      let fields = [];
      if(columns && columns.length > 0) {
        for (let i in columns) {
          let row = {};
          row.fixed = columns[i].fixed;
          row.label = columns[i].label;
          row.prop = columns[i].prop;
          row.width = columns[i].width;
          row.checked = !!(columns[i].checked === undefined || columns[i].checked);
          row.disabled = !(columns[i].disabled === undefined || !columns[i].disabled);
          fields.push(row);
        }
      }
      return fields;
    },
    computedCustomFields () {
      let customFields = this.customFields;
      let array = [];
      if (customFields && customFields.length > 0) {
        for (let i in customFields) {
          if (customFields[i].prop === '__operation') {
            if (!this.showOperation || this.type === 'singleSelect' || this.type === 'multipleSelect') {
              continue;
            }
            customFields[i].type = 'operation';
            customFields[i].prop = '__operation';
            customFields[i].width = this.operationWidth;
            customFields[i].fixed = this.operationFixed;
            customFields[i].headerAlign = 'center';
            customFields[i].align = 'center';
          }
          array.push(customFields[i]);
        }
      }
      return array;
    },
    name () {
      let name = '';
      if(this.$route && this.$route.name) {
        name = this.$route.name + '_FIELDS';
      }
      return name;
    },
    listPermission () {
      let permissions = this.permissions;
      if (!permissions || permissions.length === 0) {
        return false;
      }
      let permissionButtons = this.$store.state.permission.permissions;

      if (!permissionButtons || permissionButtons.length === 0) {
        return false;
      }

      for (let i in permissions) {
        if (permissions[i] && permissionButtons.indexOf(permissions[i]) > -1) {
          return true;
        }
      }
      return false;
    },
    rowStyle () {
      let fontSize = document.getElementsByTagName('body')[0].style.getPropertyValue("--font-size");
      let height = '36px';
      if (fontSize === '12px') {
        height = '30px';
      } else if (fontSize === '14px') {
        height = '36px';
      } else if (fontSize === '16px') {
        height = '40px';
      } else if (fontSize === '18px') {
        height = '48px';
      }
      let defaultConfig = {height: height};
      if (this.tableProps && this.tableProps.rowStyle) {
        defaultConfig = Object.assign(defaultConfig, this.tableProps.rowStyle);
      }
      return defaultConfig;
    },
    cellStyle () {
      let fontSize = document.getElementsByTagName('body')[0].style.getPropertyValue("--font-size");
      let height = '36px';
      if (fontSize === '12px') {
        height = '30px';
      } else if (fontSize === '14px') {
        height = '36px';
      } else if (fontSize === '16px') {
        height = '40px';
      } else if (fontSize === '18px') {
        height = '48px';
      }
      let defaultConfig = {
        height: height,
        fontSize: fontSize
      };

      if (this.tableProps && this.tableProps.cellStyle) {
        defaultConfig = Object.assign(defaultConfig, this.tableProps.cellStyle);
      }
      return defaultConfig;
    },
    headerCellStyle () {
      let fontSize = document.getElementsByTagName('body')[0].style.getPropertyValue("--font-size");
      let defaultConfig = {
        padding: '6px 0',
        fontSize: fontSize
      };
      if (this.tableProps && this.tableProps.headerCellStyle) {
        defaultConfig = Object.assign(defaultConfig, this.tableProps.headerCellStyle);
      }
      return defaultConfig;
    },
    sortConfig () {
      let defaultConfig = {remote: true, trigger: "cell"};
      if (this.tableProps && this.tableProps.sortConfig) {
        defaultConfig = Object.assign(defaultConfig, this.tableProps.sortConfig);
      }
      return defaultConfig;
    },
    checkboxConfig () {
      let defaultCheckboxConfig = {
        highlight: !this.isTree,
        trigger: 'row'
      };
      if (!this.isTree){
        defaultCheckboxConfig.range = false;
      }
      if (this.itemSelectable) {
        defaultCheckboxConfig.checkMethod = ({row}) => {
          let fuc = this.itemSelectable;
          return fuc(row);
        };
      }
      let userCheckboxConfig = this.tableProps && this.tableProps.checkboxConfig ? this.tableProps.checkboxConfig : {};
      return Object.assign(defaultCheckboxConfig, userCheckboxConfig);
    },
    treeConfig () {
      if (!this.isTree){
        return undefined;
      }
      let defaultConfig = {
        "expandAll": true,
        "indent": 20,
        "line": true
      };
      let userConfig = this.tableProps && this.tableProps.treeConfig ? this.tableProps.treeConfig : {};
      return Object.assign(defaultConfig, userConfig);
    },
    tableStripe () {
      if (this.isTree) {
        return undefined;
      }
      return !(this.tableProps && this.tableProps.stripe);
    },
    tableColumns () {
      let array = [];
      if (this.checkTable) {
        array.push({
          fixed: "left",
          type: "checkbox",
          width: this.checkboxWidth,
          align: "center"
        });
      }
      if (this.showOrderNumber) {
        array.push({
          title: this.$t('common.orderNumber'),
          fixed: "left",
          type: "seq",
          width: this.orderNumberWidth,
          align: "left",
          showOverflow: "tooltip"
        });
      }
      let computedCustomFields = this.computedCustomFields;
      if (computedCustomFields && computedCustomFields.length > 0) {
        for (let i in computedCustomFields) {
          let row = computedCustomFields[i];
          array.push(row);
        }
      }
      return this.columns;
    }
  },
  watch: {
    custcustomFieldsomFields (d) {
      let fixed = 'right';
      let width = '100';
      let data = getStorage(this.name);
      if(!data) {
        this.operationFixed = fixed;
        this.$emit('update:operationWidth', width);
        return false;
      }
      try{
        data = JSON.parse(data);
      }catch (e) {
        this.operationFixed = fixed;
        this.$emit('update:operationWidth', width);
        return false;
      }
      if(data && data.length > 0) {
        for( let i in data) {
          if(data[i].prop === '__operation'){
            fixed = data[i].fixed;
            width = data[i].width;
            break;
          }
        }
      }
      this.operationFixed = fixed;
      this.$emit('update:operationWidth', width);
    },
    selectData (data) {
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach((item) => {
          this.selectRow.push(this.data.indexOf(item));
        });
      }
    },
    data (d) {
      if (this.treeConfig && this.treeConfig.expandAll) {
        this.$nextTick(() => this.$refs.table.$refs.erpTable.setAllTreeExpand(true));
      }
      let multipleSelectedIds = this.multipleSelectedIds;
      if (d && d.length > 0) {
        if (this.multipleSelectedIds && this.multipleSelectedIds.length > 0) {
          this.$nextTick(() => {
            for (let i in d) {
              for (let j in multipleSelectedIds) {
                if (d[i][this.rowKey] == multipleSelectedIds[j]) {
                  this.$refs.table.$refs.erpTable.toggleCheckboxRow(d[i]);
                }
              }
            }
          });

        }
      }
    },
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    /**
     * 通知父组件关闭加载状态
     * @public
     */
    handleCloseLoading () {
      /**
       * 通知父组件关闭加载状态
       * @public
       */
      this.$emit('close-loading');
    },
    /**
     * 获取树搜索的数据
     * @param {array} data 数据
     * @public
     */
    getTreeSearchData (data) {
      /**
       * 获取树搜索的数据
       * @param {array} data 数据
       * @public
       */
      this.$emit('get-tree-search-data',data);
    },
    /**
     * 点击分页页码
     * @private
     * @param {number| string} index  分页页码
     */
    handleCurrentChange (index) {
      if(index && !isNaN(index)) {
        this.$emit('change-page', index);
      }
    },
    /**
     * 【已废弃】
     * @private
     */
    handleTableCurrentChange (data) {
    },
    /**
     * 开启配置列表单
     * @private
     */
    handleConfigColumn () {
      this.$refs.columnConfig.customColumnVisible = true;
    },
    /**
     * 判断配置列是否可被选中
     * @private
     * @param {object} row 某一列的配置
     * @param {number|string} index 索引
     */
    customColumnSelect (row, index) {
      if(row.disabled){
        return 0;
      } else {
        return 1;
      }
    },
    /**
     * 更新列配置
     * @private
     * @param {array} data 列配置数据
     */
    handleChangeConfig (data) {
      let fields = this.fields;
      let customFields = [];
      if (data && data.length > 0) {
        for(let i in data) {
          let row = {};
          row.fixed = data[i].fixed;
          row.label = data[i].label;
          row.prop = data[i].prop;
          row.width = data[i].width;
          row.checked = !!(data[i].checked === undefined || data[i].checked);
          row.disabled = !(data[i].disabled === undefined || !data[i].disabled);
          if (fields && fields.length > 0) {
            for(let j in fields) {
              if(data[i].prop === fields[j].prop){
                row.sortable = fields[j].sortable;
                row.align = fields[j].align;
                row.resizable = fields[j].resizable;
                row.headerAlign = fields[j].headerAlign;
                row.template = fields[j].template;
                row.type = fields[j].type;
                row.showOverflowTooltip = fields[j].showOverflowTooltip;
                row.treeNode = fields[j].treeNode;
                row.titleHelp = fields[j].titleHelp;
                row.minWidth = fields[j].minWidth;
                row.resizable = fields[j].resizable;
                row.visible = fields[j].visible;
                row.headerAlign = fields[j].headerAlign;
                row.footerAlign = fields[j].footerAlign;
                row.editRender = fields[j].editRender;
                row.formatter = fields[j].formatter;
                row.showTextProp = fields[j].showTextProp;
                row.cellRender = fields[j].cellRender;
                row.extra = fields[j].extra;
                row.filterRender = fields[j].filterRender;
                row.filters = fields[j].filters;
                row.filterMethod = fields[j].filterMethod;
                break;
              }
            }
          }
          customFields.push(row);
        }
      }
      this.customFields = customFields;
      this.doLayout();
    },
    /**
     * 更新表格，常用在列配置更新之后
     * @private
     */
    doLayout () {
      let timer = setTimeout(() => {
        this.$nextTick(() => {
          if (this.$refs.table && this.$refs.table.$refs.erpTable) {
            this.$emit('close-loading');
          }
        });
      }, 500);
    },
    /**
     * 切换表格分页容量
     * @private
     * @param {number|string} size 分页容量
     */
    handleSizeChange (size) {
      if (this.listPermission) {
        this.$emit('size-change', size);
      }
    },
    /**
     * 排序
     * @private
     */
    handleSortChange (data) {
      if (this.listPermission) {
        this.$emit('change-sort', data);
      }
    },
    /**
     * 搜索列表
     * @private
     */
    handleSearch (item) {
      if (this.listPermission) {
        item.search.pageIndex = item.search && item.search.pageIndex ? item.search.pageIndex : this.pageIndex;
        item.search.pageSize = item.search && item.search.pageSize ? item.search.pageSize : this.pageSize;
        this.$emit('search', item);
      }

    },
    /**
     * 头部搜索
     * @private
     */
    handleHeadSearch (form) {
      if (this.listPermission) {
        this.$emit('head-search', form);
      }
    },
    /**
     * 头部搜索重置
     * @private
     */
    handleHeadReset () {
      if (this.listPermission) {
        this.$emit('head-reset');
      }
    },
    /**
     * 导出表格
     * @private
     */
    handleExport (form) {
      if (this.listPermission) {
        this.$emit('export', form);
      }
    },
    /**
     * 表格选中的行有改变
     * @private
     */
    handleSelectionChange (data) {
      this.selectData = data.selection;
      this.$emit('selection-change', data.selection);
    },
    /**
     * 表格选中的行有改变，并保存了当前点击的行
     * @private
     */
    handleCheckboxChange (data) {
      this.$emit('select-change', {selection: data.records, row: data.row});
    },
    /**
     * 复选框范围选择造成值变化
     * @private
     */
    handleCheckboxRangeChange (data) {
      this.selectData = data.records;
      this.$emit('selection-change', data.records);
    },
    /**
     * 表格全选触发
     * @private
     */
    handleSelectAllChange (data) {
      this.$emit('select-all-change', {selection: data.selection});
    },
    /**
     * 搜索关键字
     * @private
     */
    handleSearchKeyword (data) {
      this.$emit('search-keyword', data);
    },
    /**
     * 树表格搜索关键字
     * @private
     */
    handleSearchTreeTableKeyword (data) {
      this.$emit('search-tree-table-keyword', data);
    },
    /**
     * 触发创建，【已废弃】
     * @private
     */
    handleCreate (data) {
      this.$emit('create', data);
    },
    /**
     * 触发批量删除，【已废弃】
     * @private
     */
    handleBatchDelete (data) {
      this.$emit('batch-delete', data);
    },
    /**
     * 打开/关闭高级查询框
     * @private
     */
    handleToggleAdvancedBox (obj) {
      this.$emit('toggle-advanced-box', obj);
    },
    /**
     * 单选
     * @private
     */
    handleSingleSelect ({row}) {
      this.$emit('single-select-close', row);
    },
    /**
     * 重新计算表格，如果传 true 则进行完整计算（对于某些特殊场景可能会用到，比如隐藏的表格、重新计算列宽...等）
     * @public
     * @param refull
     */
    recalculate (refull) {
      this.$refs.table.recalculate(refull);
    }
  }
};
</script>

<style lang="scss" scoped>
    $primaryColor: var(--primary-color20);
    $hoverColor: var(--primary-color70);
    ::v-deep{
        .el-scrollbar__wrap{
            overflow: hidden;
        }
    }
    .erp-page-table{
        .erp-page-pagination{
            margin-top: 8px;
            ::v-deep{
                .el-select.el-select--mini{
                    .el-input.el-input--mini.el-input--suffix{
                        input.el-input__inner{
                            height: 22px;
                        }
                        .el-select__caret.el-input__icon.el-icon-arrow-up{
                            line-height: 22px;
                        }
                    }
                }
            }
        }

    }
    .config-icon{
        font-size: 12px;
        float: right;
        cursor: pointer;
        margin-left: 20px;
    }
    .empty-block-icon{
        font-size: 60px
    }
    .empty-block-text{
        font-size: 14px;
    }
</style>
